<%--
  Created by IntelliJ IDEA.
  User: Honphie.$.Won
  Date: 2023/6/29
  Time: 9:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="./js/vue.js"></script>
  <script src="./elementui/index.js"></script>
  <script src="./js/jquery-3.4.1.min.js"></script>
  <link rel="stylesheet" href="./elementui/theme-chalk/index.css">
</head>
<body>
<h1>账号管理</h1>
<div id="app">
  <div id="tb_header" style="display: flex; align-items: center; margin-bottom: 20px">
      <el-button type="primary" icon="el-icon-circle-plus" style="margin-right: 15px;" @click="Add()">新增用户</el-button>
      <el-input v-model="input" placeholder="请输入内容" style="margin-right: 15px;width: 20%"></el-input>
      <el-button type="primary" icon="el-icon-search" @click="getAdminList()">搜索</el-button>
  </div>
  <template>
    <el-table
            :data="tableData"
            style="width: 100%">
      <el-table-column
              prop="aDMIN_ID"
              label="管理员编号"
              width="180">
      </el-table-column>
      <el-table-column
              prop="uSER_NAME"
              label="管理员账号名"
              width="180">
      </el-table-column>
      <el-table-column
              prop="nAME"
              label="真实姓名"
              width="180">
      </el-table-column>
      <el-table-column
              prop="eMAIL"
              label="邮箱"
              width="180">
      </el-table-column>
      <el-table-column
              prop="rOLE"
              label="角色身份"
              width="180">
      </el-table-column>
      <el-table-column label="修改" width="60">
        <template scope="scope">
          <el-button type="primary" icon="el-icon-edit" circle @click="Update(scope.row.aDMIN_ID)"></el-button>
        </template>
      </el-table-column>
      <el-table-column label="删除" width="60"  >
        <template scope="scope">
          <!-- 在el-button上添加一个@click.native属性，用来触发Del()方法，并将scope.row.aDMIN_ID作为参数传递 -->
          <el-button type="danger" icon="el-icon-delete" circle @click.native="Del(scope.row.aDMIN_ID)" ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="24">
        <div style="padding-top: 20px;">
          <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[5, 10, 50, 100]"
                  :page-size="pagesize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </template>
</div>
</body>
<script>

  var app = new Vue({
    el: '#app',
    data: {
      tableData: [],
      currentPage: 1,
      pagesize: 10,
      total: 0,
      showSuccessAlert: false,
      showErrorAlert: false,
      input: ''
    },
    mounted() {
      this.getAdminList();
    },
    methods: {
      getAdminList() {
        $.ajax({
          url: 'Admins_AccountsServlet?tag=getData',
          type: 'get',
          dataType: 'json',
          data: {
            currentPage: this.currentPage,
            pagesize: this.pagesize,
            query: this.input
          },
          success: (res) => {
            this.tableData = res.list;
            this.total = res.pageCount;
          }
        })
      },
        Add() {
            parent.vue.iframeUrl = 'AddAccounts.jsp';
        },
      Del(id){
        this.$confirm('您是否确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          $.ajax({
            url: 'Admins_AccountsServlet?tag=Del',
            type: 'get',
            dataType: 'json',
            data: {
              id: id
            },
            success: (res) => {
              if (res) {
                this.$alert('删除成功', '操作提示：', {
                  confirmButtonText: '知道了啦',
                });
                this.getAdminList();
              } else {
                this.$alert('删除失败', '操作提示：', {
                  confirmButtonText: '知道了啦',
                });
              }
            }
          });

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      handleSizeChange: function (size) {
        this.pagesize = size;
        this.getAdminList();
        console.log(this.pagesize)  //每页下拉显示数据
      },
      handleCurrentChange: function(currentPage){
        this.currentPage = currentPage;
        console.log(this.currentPage)  //点击第几页
        this.getAdminList();
      },
      Update(id){
          parent.vue.iframeUrl = 'UpdateAdmin.jsp?id='+id;
      }
    }
  })
</script>
</html>

